iT邦幫忙

2022 iThome 鐵人賽

DAY 5
0
Modern Web

我與 Blazor 的 30 天系列 第 5

ASP.NET Core Blazor 系列 - 005 元件(Componet) 資料繫結

  • 分享至 

  • xImage
  •  

前言

本篇文章同步發表於 個人部落格 Jim's Blog

上一篇我們做了一個簡單的表單元件,其中有用到 bind-value 來將 input 內的資料轉送到 C# 內,在這一篇我會來介紹 Razor 元件當中資料繫結的細節(繞口令)

Data Binding 我看過有些翻譯翻成 資料繫結 有些則是翻成 資料綁定,我覺得這兩個都很到位,只是繫結這個詞真的很難打 XD

@bind

請先建立 BindSample.razor 元件

@page "/Bind"
<h3>BindSample</h3>

<p>輸入的文字是: @Message </p>
<input @bind="Message" placeholder="請輸入文字" />

@code {
    private string Message { get; set; }
}

完成後開啟網頁到該元件的Url,並且在紅色的方框內輸入文字,完成後按下Enter後就在上方橘色框顯示輸入的文字

BindSample 頁面

從 BindSample 的程式碼中可以看見,在input元素內寫了 @bind="Data" 這會讓下方的Data屬性與input的value做雙向的連結,如果有接觸過Vue的人可能有在Vue的官網看到一篇範例,在input欄位輸入後馬上就會反應在橘色的框框內

Vue 官網範例

怎麼到了 Blazor 還要多按一下Enter呢?

會導致這樣的原因請看下方的程式碼

// 我們寫的
<input @bind="Message" placeholder="請輸入文字" />

// 概念上等於
<input value="@Message" @onchange="@((ChangeEventArgs __e) => Message = __e?.Value?.ToString())" />

@bind 在做綁定時預設的事件是 onchange ,這是需要離開input 或者 需要按下Enter才會有反應的主因,如果希望達成同步的效果只需要變更觸發的事件(oninput)即可

<input @bind-="Data" @bind:event="oninput" placeholder="請輸入文字" />

如果今天 bind 的型別是 int ,event 觸發的時輸入的值為int不能接受的內容(例如 3.14),會自動還原成原始值

Multiple Select

如果你的 Select 允許複選時,C#的屬性需要調整為陣列

必須為陣列類型,使用其他型別會導致 Exception

<select @bind="joinGroup" class="form-control input-lg" multiple>
    @foreach (var item in group)
    {
        <option value="@item">@item</option>
    }
</select>

@code {
    private List<string> group = new List<string>
    {
        "Agile","AI&Data","DevOps","IT管理","Mobile Development",
        "Modern Web","Security","Software Development","Web 3","影片教學"
    };
    private string[] joinGroup = new string[] { };
}

格式化

  • 日期格式化

先來一段程式碼

<p>日期格式化: @Date </p>
<input @bind="Date" @bind:format="yyyy-MM-dd" />


@code {
    private DateTime Date { get; set; }
}

若bind的資料型別是DateTime,可以使用 @bind:format 來做日期格式化,目前只有支援日期格式,日後的版本可能會新增其他格式的支援

此處的input type是預設的text,如想要改成 type="date" format 格式必須要是 yyyy-MM-dd 也就說要這樣寫

<input type="date" @bind:format="yyyy-MM-dd">
  • 自訂格式
    預設的 bind:format 目前只有支援日期的,但我們可以透過C#的存取子來實作自訂格式處理
<p>自定格式化: @FormatPrice </p>
<input @bind="Price" />


@code {
    private decimal Price;

    private string FormatPrice
    {
        get => Price.ToString("C", CultureInfo.CurrentCulture);
    }
}

實作自訂格式

小結

這篇文章我們學會了將C#內的物件成員和HTML頁面的資料做繫結、如何做格式化還有繫結的概念。

關於bind還有幾個重要的用法還沒有說明,分別是元件參數繫結以及跨元件繫結,這兩個牽涉到還沒有碰過的元件參數的部分,我會在明日的章節講解參數的時候一起說明。

下一篇文章介紹元件參數的使用


上一篇
ASP.NET Core Blazor 系列 - 004 元件(Componet) 概觀
下一篇
ASP.NET Core Blazor 系列 - 006 元件(Componet) 參數
系列文
我與 Blazor 的 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言